import { useEffect, useLayoutEffect, useRef, useState } from 'react'
import Normal from './search/Normal'
import Normal2 from './search/Normal2'
import Normal3 from './search/Normal3'
import Normal4 from './search/Normal4'
import Normal5 from './search/Normal5'

import s from './style.module.scss'

export default function EffectDemo() {
  const [current, setCurrent] = useState(0)
  const n1 = useRef<HTMLDivElement>(null)
  const n2 = useRef<HTMLDivElement>(null)
  const n3 = useRef<HTMLDivElement>(null)
  const n4 = useRef<HTMLDivElement>(null)
  const n5 = useRef<HTMLDivElement>(null)


  const [count, setCount] = useState(0)

  useEffect(() => {
    if (count == 0) {
      setCount(1)
    }
    var a = document.getElementById('meimei')
    if (!a) { return }
    a.innerHTML = 'xxx'
  }, [count])

  useEffect(() => {
    document.addEventListener('scroll', () => {
      const n1y = n1.current?.getBoundingClientRect().y as number
      const n2y = n2.current?.getBoundingClientRect().y as number
      const n3y = n3.current?.getBoundingClientRect().y as number
      const n4y = n4.current?.getBoundingClientRect().y as number
      const n5y = n5.current?.getBoundingClientRect().y as number

      if (n1y > 0 && n1y < window.innerHeight) {
        setCurrent(0)
      }
      if (n2y > 0 && n2y < window.innerHeight) {
        setCurrent(1)
      }
      if (n3y > 0 && n3y < window.innerHeight) {
        setCurrent(2)
      }
      if (n4y > 0 && n4y < window.innerHeight) {
        setCurrent(3)
      }
      if (n5y > 0 && n5y < window.innerHeight) {
        setCurrent(4)
      }
    })
  }, [])

  return (
    <div>
      <div id='meimei'>{count}</div>
      <button onClick={() => setCount(0)}>reset 0</button>
      <div id='gege' className={s.nav}>
        <div className={current == 0 ? `${s.item} ${s.active}` : s.item}>案例一</div>
        <div className={current == 1 ? `${s.item} ${s.active}` : s.item}>案例二</div>
        <div className={current == 2 ? `${s.item} ${s.active}` : s.item}>案例三</div>
        <div className={current == 3 ? `${s.item} ${s.active}` : s.item}>案例四</div>
        <div className={current == 4 ? `${s.item} ${s.active}` : s.item}>案例五</div>
      </div>
      <div ref={n1}>
        <Normal />
      </div>
      <div ref={n2}>
        <Normal2 />
      </div>
      
      <div ref={n3}>
        <Normal3 />
      </div>

      <div ref={n4}>
        <Normal4 />
      </div>
      
      <div ref={n5}>
        <Normal5 />
      </div>
      
    </div>
  )
}




function TablePage() {
  const {data, loading, setLoading, error} = usePagiantion(api)

  return (
    <Table data={data} />
  )
}